<template>
  <div>
      <el-dialog :title="deptTitle" v-model="deptFlag"width="60%" >
             <el-form ref="deptForm" label-width="100px" :model="addForm" :rules="rules"> 
              <el-row>
                  <el-col :span="24">
                      <el-form-item label="上级部门" prop="parentId">
                            <el-tree-select
                              v-model="addForm.parentId"
                              :data="parentDept"
                              :render-after-expand="false"
                                row-key="deptId"
                              node-key="deptId"
                              :props="{label:'deptName',children:'children'}"
                            >
                          </el-tree-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                        <el-form-item label="部门名称" prop="deptName">
                          <el-input v-model="addForm.deptName"></el-input>
                        </el-form-item>
                    </el-col>
                 <el-col :span="12">
                        <el-form-item label="显示排序" prop="orderNum">
                      <el-input-number
                            v-model="addForm.orderNum"
                            :min="1"
                            :max="10"
                            controls-position="right"
                            size="large"
                          
                          />
                        </el-form-item>
                    </el-col>
                       <el-col :span="12">
                        <el-form-item label="负责人" prop="leader">
                          <el-input v-model="addForm.leader"></el-input>
                        </el-form-item>
                    </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="addForm.phone"></el-input>
                          </el-form-item>
                     </el-col>
                         <el-col :span="12">
                          <el-form-item label="邮箱" prop="email">
                            <el-input v-model="addForm.email"></el-input>
                          </el-form-item>
                     </el-col>
                         <el-col :span="12">
                          <el-form-item label="状态">
                           <el-radio-group v-model="addForm.status">
                            <el-radio value="0" size="large">正常</el-radio>
                            <el-radio value="1" size="large">停用</el-radio>
                          </el-radio-group>
                          </el-form-item>
                     </el-col>
              </el-row>
             </el-form>
             <template #footer>
                  <el-button type="primary" @click="toAdd">确定</el-button>
                  <el-button @click="deptFlag=false">取消</el-button>
             </template> 
      </el-dialog> 
  </div>
</template>
<script setup lang="ts"> 
 import {addDept,getDept,updateDept} from '@/api/dept'
 import {ref,reactive,defineProps,defineExpose,
  defineEmits,watch
 } from 'vue'
import type { FormInstance } from 'element-plus';
  let props=defineProps<{
    parentDept:Array<any>
  }>()

 let deptFlag=ref<boolean>(false) //弹出层控制器

interface Iform{
  deptId?: string|number,// 部门id
  deptName: string,//  部门名称
    email: string,// 邮箱
   leader: string ,// 负责人
   orderNum: number   ,//排序
   parentId: string ,// 上级部门id
    phone: string,// 联系电话
    status: string, //状态
    parentName?: string //上级部门的名称 
}
let deptTitle=ref("添加部门")
//  v-model的数据
 let addForm=reactive<Iform>({
   deptId: "",// 部门id
   deptName: "",//  部门名称
    email: "",// 邮箱
   leader: "" ,// 负责人
   orderNum: 1   ,//排序
   parentId: "" ,// 上级部门id
    phone: "",// 联系电话
    status: "0"  //状态
 })
  

 let rules={
  deptName:[{required:true,message:'请输入部门名称',trigger:'blur'}],
  email:[{required:true,message:'请输入邮箱',trigger:'blur'}],
  leader:[{required:true,message:'请输入负责人',trigger:'blur'}],
  orderNum:[{required:true,message:'请输入排序',trigger:'blur'}],
  parentId:[{required:true,message:'请选择上级部门',trigger:'blur'}],
 }
 let deptForm=ref<FormInstance|null>() //表单组件
 let emit=defineEmits(["updateList"])
 let toAdd=()=>{
      // 验证通过表单后
        deptForm.value?.validate(async (vali)=>{
          if(vali){
            if(addForm.deptId){ //有部门id走 修改接口
              let EditRes=await updateDept(addForm)
              console.log(EditRes,"修改接口")
            }else{ //没有部门id 添加接口
            
            let res=await addDept(addForm)
                console.log(res,"添加接口")
            }
           

            deptFlag.value=false;
            deptTitle.value="添加部门"
            // 子传父方式 更新列表
            emit("updateList")
          }
        })
 }
//  点击修改 获取修改的部门的详细信息  进行回显操作
 let getDeptInfo=async (deptId:string|number)=>{
      deptFlag.value=true
      deptTitle.value="修改部门"
      let res=await getDept(deptId) 
       console.log(res,"部门详情接口")
       addForm.deptName=res.data.deptName
       addForm.email=res.data.email
       addForm.leader=res.data.leader
       addForm.orderNum=res.data.orderNum
       addForm.parentId=res.data.parentId
       addForm.phone=res.data.phone
       addForm.status=res.data.status
       addForm.parentName=res.data.parentName //上级部门的名称
       addForm.deptId=res.data.deptId //修改需要的id
 }
  defineExpose({ //暴露子组件的数据 
    deptFlag,
    addForm,
    getDeptInfo
 })
// 监听deptFlag的变化 关闭弹出层后  清空表单数据
 watch(deptFlag,(val)=>{
    if(!val){
      addForm.deptId=""
      addForm.deptName=""
      addForm.email=""
      addForm.leader=""
      addForm.orderNum=1
      addForm.parentId=""
      addForm.phone=""
      addForm.status="0"
      addForm.parentName="" //上级部门的名称
    }
 })
</script>